<template>
	<div class="home-wrap">
		<div class="line-grade-box">
			<!-- 搜索区/banner -->
			<div :style='"background: url(" + homeTopBg + ") no-repeat top;"' class="search-area">
				<div class="search-box">
					<div @click="handleToSearch" class="search-input">
						<img class="search-icon" :src="searchIcon" alt="">
						<div class="search-text">输入商品名称或类目</div>
						<div class="search-btn">搜索</div>
					</div>
					<!-- <img @click="handleToKefu" class="kefu-icon" :src="kefuIcon" alt=""> -->
					<img @click="handleToNotice" class="help-icon" :src="helpIcon" alt="">
				</div>
			</div>

			<!-- 轮播区 -->
			<van-swipe class="my-swipe" :autoplay="6000" indicator-color="white">
				<van-swipe-item v-for="(item, index) in banners" :key="index" @click="handleToParams(item)">
					<div :style='"background: url(" + item.image_url + ") no-repeat center"' class="banner-li">
					</div>
				</van-swipe-item>
			</van-swipe>

			<div class="line"></div>

			<!-- tab区 -->
			<van-tabs v-model="tabCurrent" @change="handleTabChange" title-active-color="#333333"
				title-inactive-color="#333333" line-width="">
				<van-tab v-for="(item, index) in tabList" :key="index" :title="item.name" :title-style="{
					fontWeight: 500,
					fontSize: '16px'
				}">

				</van-tab>
			</van-tabs>

			<!-- 类别标签 -->
			<div class="type-list">
				<!-- 推荐专区 -->
				<template v-if="tabCurrent === 0">
					<div v-for="(item) in shortcuts" :key="item.id" @click="handleToArea(item)"
						class="type-li active-btn">
						<img class="type-icon" :src="item.image_url" alt="">
						<div class="type-name">{{ item.name }}</div>
					</div>
				</template>
				<template v-else>
					<!-- 其他类目 -->
					<div v-for="(item) in typeList" :key="item.id" @click="handleToCate(item)"
						class="type-li active-btn">
						<img class="type-icon" :src="item.icon" alt="">
						<div class="type-name">{{ item.name }}</div>
					</div>
				</template>
			</div>

		</div>
		<!-- 推荐位 -->
		<div v-if="tabCurrent === 0" class="recommend-box">
			<div @click="handleToGold" class="gold-recommend">
				<div class="gold-top">
					<img class="gold-recommend-icon-1" :src="recommendIcon1" alt="">
				</div>

				<van-swipe class="gold-swipe" vertical :show-indicators="false" :autoplay="5000">
					<van-swipe-item v-for="(item, index) in goods_jptj_index" :key="index">
						<div class="gold-bottom">
							<div class="gold-bottom-good">
								<img class="good-main" :src="goods_jptj[index * 2].cover_url" alt="">
								<div class="good-desc">
									<div class="good-name">{{ goods_jptj[index * 2].name }}</div>
									<!-- <div class="good-sale" >销量{{ goods_jptj[index * 2].sales_count | saleWordFilter }}</div> -->
								</div>
							</div>
							<div class="gold-bottom-good">
								<img class="good-main" :src="goods_jptj[index * 2 + 1].cover_url" alt="">
								<div class="good-desc">
									<div class="good-name">{{ goods_jptj[index * 2 + 1].name }}</div>
									<!-- <div class="good-sale" >销量{{ goods_jptj[index * 2 + 1].sales_count | saleWordFilter }}</div> -->
								</div>
							</div>
						</div>
					</van-swipe-item>
				</van-swipe>


			</div>
			<div class="today-good">
				<div @click="handleToShop" class="gold-shop">
					<div class="gold-top">
						<img class="gold-recommend-icon-2" :src="recommendIcon2" alt="">
					</div>

					<van-swipe class="today-swipe" vertical :show-indicators="false" :autoplay="autoplayTime">
						<van-swipe-item v-for="(item, index) in shop_jxhd" :key="index">
							<div class="today-bottom-good">
								<img class="today-main" :src="item.cover_url" alt="">
								<div class="today-desc">
									<div class="good-name">{{ item.name }}</div>
									<div class="good-sale">{{ item.order_quantity | saleWordFilter }}人买过</div>
								</div>
							</div>
						</van-swipe-item>
					</van-swipe>
				</div>
				<div @click="handleToNew" class="gold-today">
					<div class="gold-top">
						<img class="gold-recommend-icon-3" :src="recommendIcon3" alt="">
					</div>
					<van-swipe class="today-swipe" vertical :show-indicators="false" :autoplay="autoplayTime">
						<van-swipe-item v-for="(item, index) in goods_jrsx" :key="index">
							<div class="today-bottom-good">
								<img class="today-main" :src="item.cover_url" alt="">
								<div class="today-desc">
									<div class="good-name">{{ item.name }}</div>
									<div class="good-sale">¥{{ item.price }}</div>
								</div>
							</div>
						</van-swipe-item>
					</van-swipe>

				</div>
			</div>
		</div>


		<!-- <div class="banner1" >
			<img :src="banner1" alt="" @click="goSelection">
		</div> -->
		<van-swipe class="my-swipe1 banner1" style="margin-top: 0.2rem;" :show-indicators="false" :autoplay="4000" indicator-color="white"
			v-if="tabCurrent === 0&& picture_hdzq2.length>0">
			<van-swipe-item v-for="(item, index) in picture_hdzq2" :key="index" @click="handleToParams(item)">
				<img :src="item.image_url" alt="">
			</van-swipe-item>
		</van-swipe>
		<!-- 花朵抵扣 -->
		<div class="zhuan_qu" v-if="tabCurrent === 0&& goods_syzq.length>0">
			<div class="private">
				<div class="gold-top">
					<img class="gold-recommend-icon-4" :src="recommendIcon4" alt="">
					<div @click="handleToSelection('goods_syzq')">查看更多<van-icon name="arrow" /></div>
				</div>
				<div class="banner2">
					<div class="private_item" v-for="(item, index) in goods_syzq" :key="index" @click="handleToItem(item.id)">
						<img :src="item.cover_url" alt="">
						<div>{{ item.name }}</div>
					</div>
				</div>
				<!-- picture_hdzq -->
				<!-- <van-swipe class="banner2" :show-indicators="false" :autoplay="4000" indicator-color="white">
					<van-swipe-item class="private_item" v-for="(item, index) in goods_jptj" :key="index">
						<img :src="item.image_url" alt="">
						<div>{{ item.name }}</div>
					</van-swipe-item>
				</van-swipe> -->
			</div>
		</div>
		
		<div class="zhuan_qu" v-if="tabCurrent === 0&& goods_jfzq.length>0">
			<div class="private">
				<div class="gold-top">
					<img class="gold-recommend-icon-5" :src="recommendIcon5" alt="">
					<div @click="handleToSelection('goods_jfzq')">查看更多<van-icon name="arrow" /></div>
				</div>
				<div class="banner2">
					<div class="private_item" v-for="(item, index) in goods_jfzq" :key="index" @click="handleToItem(item.id)">
						<img :src="item.cover_url" alt="">
						<div>{{ item.name }}</div>
					</div>
					<div class="private_item" v-if="goods_jfzq.length<3">
					</div>
				</div>
				<!-- picture_hdzq -->
				<!-- <van-swipe class="banner2" :show-indicators="false" :autoplay="4000" indicator-color="white">
					<van-swipe-item class="private_item" v-for="(item, index) in goods_jptj" :key="index">
						<img :src="item.image_url" alt="">
						<div>{{ item.name }}</div>
					</van-swipe-item>
				</van-swipe> -->
			</div>
		</div>
		<div class="line"></div>
		<van-swipe class="my-swipe1 banner1" :show-indicators="false" :autoplay="4000" indicator-color="white"
			v-if="tabCurrent === 0 ">
			<van-swipe-item v-for="(item, index) in picture_hdzq" :key="index" @click="handleToParams(item)">
				<img :src="item.image_url" alt="">
			</van-swipe-item>
		</van-swipe>
		<!-- 商品列表 -->
		<div :style="{ marginTop: tabCurrent !== 0 ? '-1.4rem' : 0 }">
			<van-list v-model="loadingPage" :finished="finished" :finished-text="list.length ? '没有更多了' : ''"
				@load="ajaxGoodList">

				<div v-if="finished && !list.length" class="empty-good">
					<van-empty description="暂无商品" />
				</div>

				<!-- 商品列表 -->
				<!-- 商品列表 -->
				<div class="good-ul">
					<goodItem v-for="(item, index) in list" :key="index" :item="item"></goodItem>
				</div>

			</van-list>
		</div>


		<!-- 归属地 -->
		<myLocation ref="myLocationRef" :adcode="adcode" :addressText="addressText" :latitude="latitude"
			:longitude="longitude">
		</myLocation>


		<footTab :current="0"></footTab>
	</div>
</template>

<script>
import footTab from '@/components/foot-tab';
import {
	homeTopBg, searchIcon, kefuIcon, helpIcon, banner,
	recommendIcon1, recommendIcon2, recommendIcon3, recommendIcon4, recommendIcon5, banner1
} from '@/tool/static-img';
import { HOME_DATA, TJZQ, CATE_LIST, GOOD_LIST } from '@/api/home';
import { USERDETAIL } from '@/api/mine';
import goodItem from './components/good-item';
import myLocation from './components/my-location';
import { bannerToParams } from '@/tool/methods';
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
	components: {
		footTab,
		myLocation,
		goodItem
	},
	data() {
		return {
			homeTopBg, searchIcon, kefuIcon, helpIcon, banner,
			recommendIcon1, recommendIcon2, recommendIcon3, banner1, recommendIcon4, recommendIcon5,
			autoplayTime: 7000,
			banners: [],
			tabList: [],

			tabCurrent: 0,
			// 用户id
			uid: '',
			nickname: '',

			// 推荐专区
			shortcuts: [],
			goods_jptj: [],
			goods_jrsx: [],
			shop_jxhd: [],
			goods_syzq: [],
			goods_jptj_index: 0,
			picture_hdzq: [],
			goods_jfzq:[],
			picture_hdzq2:[],
			// 分类图片
			typeList: [],

			// 分页
			page: 1,
			pageSize: 20,
			list: [],
			loadingPage: false,
			finished: false,

			// 归属地
			adcode: '',
			addressText: '',
			latitude: '',
			longitude: ''

		}
	},
	created() {
		// 首页数据
		this.getHomeData();

		// 推荐专区
		this.getRecommend();

		// 延迟2s继续
		setTimeout(() => {
			this.autoplayTime = 5000;
		}, 2000)
		localStorage.removeItem('content')
		// 所属区域
		this.getMyArea();
		localStorage.removeItem('goodmsg')

	},
	activated(){
		document.title = '首页';
	},
	methods: {
		// 客服
		handleToKefu() {
			const fromUrl = window.location.href;

			const clientId = this.uid;
			if (clientId && this.nickname) {
				// 用户
				const otherParams = JSON.stringify({
					"nickName": this.nickname
				})
				window.location.href = `https://webchat02.7moor.com/wapchat.html?accessId=62ea1e10-6fec-11ef-a989-e5cf0d8aa69c&clientId=${clientId}&otherParams=${otherParams}&fromUrl=${fromUrl}&urlTitle=h5&language=ZHCN`
			} else {
				// 游客
				window.location.href = `https://webchat02.7moor.com/wapchat.html?accessId=62ea1e10-6fec-11ef-a989-e5cf0d8aa69c&fromUrl=${fromUrl}&urlTitle=h5&language=ZHCN`
			}
		},
		// 所属区域
		getMyArea() {
			const token = localStorage.getItem('token');
			if (!token) {
				return
			}
			this.$http.get(USERDETAIL).then(res => {
				const {
					data
				} = res;

				this.uid = data.uid;
				this.nickname = data.nickname;

				if (data.location_status === 0) {
					// 未设置所属区域 - 去定位
					this.getLocation();
				}
			})
		},
		// 未设置所属区域 - 去定位
		getLocation() {
			var _this = this;

			window._AMapSecurityConfig = {
				securityJsCode: "638b1bb3fefe982cdf2a8db2cf2a7846",
			};

			// 加载高德地图的定位模块
			AMapLoader.load({
				key: 'ac8b3896464d5d2b7735e62100bee1d0', // 在此处替换为你的高德地图APIKey
				version: '2.0',
				plugins: ['AMap.Geolocation', 'AMap.Geocoder'] // 加载 Geolocation 插件
			}).then((AMap) => {
				const geolocation = new AMap.Geolocation({
					enableHighAccuracy: true, // 是否使用高精度定位，默认:true
					useNative: true, // 是否使用安卓定位sdk用来进行定位，需要安卓端sdk配合
					timeout: 5000,
					needAddress: true
				});

				var geocoder = new AMap.Geocoder({
					// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
					city: '010'
				})

				geolocation.getCurrentPosition((status, result) => {
					console.log(result, '定位信息')

					if (status === 'complete') {
						_this.latitude = result.position.lat;
						_this.longitude = result.position.lng;

						// 如果获取到地址信息
						if (result.addressComponent && result.addressComponent.adcode) {
							const addressComponent = result.addressComponent;
							_this.adcode = addressComponent.adcode;
							_this.addressText = addressComponent.province + addressComponent.city + addressComponent.district;
							_this.$refs['myLocationRef'].show = true;
						} else {
							// 逆转码
							let lnglat = [_this.longitude, _this.latitude]
							geocoder.getAddress(lnglat, function (status, result) {
								console.log(result, '逆编码信息')
								if (status === 'complete' && result.info === 'OK') {
									const addressComponent = result.regeocode.addressComponent;
									_this.adcode = addressComponent.adcode;
									_this.addressText = addressComponent.province + addressComponent.city + addressComponent.district;
									_this.$refs['myLocationRef'].show = true;
								}
							})
						}

					} else {
						onError(result);
					}
				});
			}).catch((e) => {
				console.error('地图加载失败:', e);
			});
			// 定位出错的回调函数
			function onError(data) {
				_this.$toast('定位失败：请检查是否开通定位权限')
			}
		},
		// 首页数据
		getHomeData() {
			this.$http.get(HOME_DATA)
				.then(res => {
					const {
						data
					} = res;
					this.banners = data.banners;
					this.tabList = data.navigations;
				})
		},
		// 私域甄选
		goSelection() {
			this.$router.push({
				name: 'selection',
			})
		},
		// 去商品
		handleToItem(id) {
			localStorage.setItem('goodmsg', 1)
			this.$router.push({
				name: 'good',
				query: {
					id: id
				}
			})

		},
		// 轮播跳转
		handleToParams(item) {
			bannerToParams(item)
		},
		// 分类
		handleToCate(item) {
			localStorage.removeItem('searchKey');
			this.$router.push({
				name: 'goodList',
				query: {
					cate_id: item.id
				}
			})
		},
		//私域
		handleToSelection(id) {

			this.$router.push({
				name: 'selection',
				query:{
					msg:id
				}
			})
		},
		// 推荐专区
		getRecommend() {
			this.$http.get(TJZQ)
				.then(res => {
					const {
						data
					} = res;


					this.shortcuts = data.shortcuts;
					this.goods_jptj_index = Math.ceil(data.goods_jptj.length / 2);
					this.goods_jptj = data.goods_jptj;
					this.goods_jrsx = data.goods_jrsx;
					this.shop_jxhd = data.shop_jxhd;
					this.goods_syzq = data.goods_syzq
					this.picture_hdzq = data.picture_hdzq
					this.picture_hdzq2=data.picture_hdzq2
					this.goods_jfzq=data.goods_jfzq
				})
		},
		// 去搜索页
		handleToSearch() {
			this.$router.push({
				name: 'search'
			})
		},
		// 去公告列表 
		handleToNotice() {
			this.$router.push({
				name: 'notice'
			})
		},
		// 类目切换
		handleTabChange(index) {

			// 分页
			this.resetInit();


			if (!index) {
				return
			}

			let id = this.tabList[index].jump_params;

			if (!id) {
				this.typeList = [];
				return
			}

			return

			this.$http.get(CATE_LIST + id)
				.then(res => {
					const {
						data
					} = res;

					this.typeList = data;
				})
		},
		// 专区
		handleToArea(item) {
			if (item.name == '全部') {
				this.$router.push({
					name: 'lifeArea'
				})
			} else {
				this.$toast('暂未开放')
			}
		},
		// 金榜推荐
		handleToGold() {
			this.$router.push({
				name: 'newArea',
				query: {
					type: 'gold'
				}
			})
		},
		// 新人专区
		handleToNew() {
			this.$router.push({
				name: 'newArea',
				query: {
					type: 'new'
				}
			})
		},
		// 精选好店
		handleToShop() {
			this.$router.push({
				name: 'goldShop'
			})
		},
		resetInit() { //重置
			this.page = 1;
			this.list = [];
			this.finished = false;

			this.loadingPage = true;
			this.ajaxGoodList()
		},
		// 列表请求
		ajaxGoodList() {
			let params = {};
			params['page_num'] = this.page;
			params['page_size'] = this.pageSize;

			if (this.tabCurrent) {
				params['cate_id'] = this.tabList[this.tabCurrent].jump_params;
			}


			this.$http.post(GOOD_LIST, params)
				.then(res => {
					const {
						list
					} = res.data;

					if (list && list.length) {
						this.page++;
						this.list = this.list.concat(list);
						// 加载状态结束
						this.loadingPage = false;
						if (list.length < this.pageSize) {
							this.finished = true;
						}
					} else {
						this.finished = true;
					}
				})
		}

	}


}
</script>

<style lang="scss">
.home-wrap {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: calc(1rem + constant(safe-area-inset-bottom));
	padding-bottom: calc(1rem + env(safe-area-inset-bottom));
	box-sizing: border-box;

	.line-grade-box {
		padding-bottom: 1.72rem;
		background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 82%, #F5F5F5 100%);
	}

	.search-area {
		width: 100%;
		height: 2.72rem;
		padding-top: 0.08rem;
		box-sizing: border-box;
		background-size: cover !important;

		.search-box {
			display: flex;
			align-items: center;
			width: 6.86rem;
			height: 0.72rem;
			margin: auto;

			.search-input {
				position: relative;
				display: flex;
				align-items: center;
				width: 6.34rem;
				height: 0.72rem;
				border-radius: 0.42rem;
				background-color: #ffffff;

				.search-icon {
					width: 0.32rem;
					height: 0.32rem;
					margin-left: 0.28rem;
					margin-right: 0.16rem;
				}

				.search-text {
					height: 0.4rem;
					line-height: 0.4rem;
					font-weight: 400;
					font-size: 0.28rem;
					color: #c3c3c3;
				}

				.search-btn {
					position: absolute;
					right: 0.06rem;
					top: 0;
					bottom: 0;
					margin: auto;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 1.12rem;
					height: 0.6rem;
					margin-left: 0.88rem;
					font-weight: 400;
					font-size: 0.28rem;
					color: #ffffff;
					border-radius: 0.3rem;
					background: linear-gradient(135deg, #FF5851 0%, #E9011B 100%);
				}
			}

			.kefu-icon {
				width: 0.48rem;
				height: 0.48rem;
				margin-left: 0.32rem;
			}

			.help-icon {
				width: 0.48rem;
				height: 0.48rem;
				margin-left: 0.24rem;
			}
		}
	}

	.my-swipe {
		width: 7.02rem;
		height: 2.4rem;
		margin: auto;
		margin-top: -1.64rem;

		.banner-li {
			width: 100%;
			height: 100%;
			border-radius: 0.16rem;
			background-size: cover !important;
		}
	}

	.van-tabs__line {
		width: 32px;
		height: 7px;
		bottom: 32px;
		background: linear-gradient(90deg, #FD1A1A 0%, rgba(231, 1, 1, 0) 100%);
	}

	.van-tabs--line .van-tabs__wrap {
		height: 54px;
	}

	.type-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0 0.45rem;

		.type-li {
			margin-left: 0.4rem;
			margin-bottom: 0.16rem;

			&:nth-child(5n + 1) {
				margin-left: 0;
			}

			.type-icon {
				display: block;
				width: 1rem;
				height: 1rem;
			}

			.type-name {
				width: 1rem;
				height: 0.34rem;
				font-family: PingFangSC, PingFang SC;
				line-height: 0.34rem;
				font-weight: 400;
				font-size: 0.24rem;
				color: #333333;
				text-align: center;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
			}
		}
	}

	.gold-swipe {
		height: 2.88rem;
	}

	.recommend-box {
		display: flex;
		width: 7.02rem;
		margin: auto;
		margin-top: -1.48rem;

		.gold-recommend {
			width: 3.44rem;
			height: 3.44rem;
			background-color: #ffffff;
			border-radius: 0.16rem;
			overflow: hidden;

			.gold-bottom {
				position: relative;
				height: 2.88rem;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					width: 3.02rem;
					height: 1px;
					background: #F2F4F5;
				}

				.gold-bottom-good {
					display: flex;
					align-items: center;
					height: 1.44rem;

					.good-main {
						width: 1.08rem;
						height: 1.08rem;
						margin-left: 0.2rem;
						border-radius: 0.16rem;
					}

					.good-desc {
						height: 1.08rem;
						margin-left: 0.12rem;
						font-family: PingFangSC, PingFang SC;

						.good-name {
							height: 0.34rem;
							width: 1.82rem;
							margin-top: 0.08rem;
							margin-bottom: 0.22rem;
							line-height: 0.34rem;
							font-weight: 400;
							font-size: 0.24rem;
							color: #333333;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							word-break: break-all;
						}

						.good-sale {
							height: 0.28rem;
							margin-left: 0.06rem;
							line-height: 0.28rem;
							font-size: 0.2rem;
							font-weight: 400;
							color: #FE7900;
						}
					}
				}
			}
		}

		.gold-top {
			display: flex;
			align-items: center;
			width: 100%;
			height: 0.56rem;
			border-radius: 0.16rem 0.16rem 0 0;
			background: linear-gradient(180deg, rgba(255, 233, 233, 0.71) 0%, #FFFFFF 100%);
		}

		.gold-recommend-icon-1 {
			width: .9rem;
			height: 0.24rem;
			margin-left: 0.28rem;
		}

		.gold-recommend-icon-2 {
			width: 1.18rem;
			height: 0.24rem;
			margin-left: 0.28rem;
		}

		.gold-recommend-icon-3 {
			width: 1.48rem;
			margin-left: 0.28rem;
		}

		.today-swipe {
			height: 1.1rem;
		}

		.today-good {
			margin-left: 0.14rem;

			.gold-shop {
				width: 3.44rem;
				height: 1.66rem;
				margin-bottom: 0.12rem;
				border-radius: 0.16rem;
				background-color: #ffffff;

				.today-bottom-good {
					display: flex;
					height: 1.1rem;

					.today-main {
						width: 0.96rem;
						height: 0.96rem;
						margin-left: 0.2rem;
						border-radius: 0.16rem;
					}

					.today-desc {
						height: 0.96rem;
						margin-left: 0.1rem;

						.good-name {
							height: 0.34rem;
							width: 1.92rem;
							margin-top: 0.08rem;
							margin-bottom: 0.14rem;
							line-height: 0.34rem;
							font-weight: 400;
							font-size: 0.24rem;
							color: #333333;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							word-break: break-all;
						}

						.good-sale {
							height: 0.28rem;
							margin-left: 0.06rem;
							line-height: 0.28rem;
							font-size: 0.2rem;
							font-weight: 400;
							color: #FE7900;
						}
					}
				}

			}

			.gold-today {
				width: 3.44rem;
				height: 1.66rem;
				border-radius: 0.16rem;
				background-color: #ffffff;

				.today-bottom-good {
					display: flex;
					height: 1.1rem;

					.today-main {
						width: 0.96rem;
						height: 0.96rem;
						margin-left: 0.2rem;
						border-radius: 0.16rem;
					}

					.today-desc {
						height: 0.96rem;
						margin-left: 0.1rem;

						.good-name {
							height: 0.34rem;
							width: 1.92rem;
							margin-top: 0.08rem;
							margin-bottom: 0.12rem;
							line-height: 0.34rem;
							font-weight: 400;
							font-size: 0.24rem;
							color: #333333;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							word-break: break-all;
						}

						.good-sale {
							height: 0.34rem;
							margin-left: 0.06rem;
							line-height: 0.34rem;
							font-size: 0.24rem;
							font-weight: 500;
							color: #F32A23;
						}
					}
				}

			}
		}
	}

	.good-ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0.14rem 0.24rem 0;
	}

	.empty-good {
		padding-top: 1rem;
	}

	.banner1 {
		width: 95%;
		margin: 0 auto;
		margin-top: 0.1rem;

		img {
			width: 100%;
		}
	}
}

.zhuan_qu {
	width: 95%;
	height: 3.6rem;
	margin: .2rem auto;
	border-radius: .16rem;
	background: #fff;

	.private {
		.gold-top {
			height: .64rem;
			background: linear-gradient(180deg, rgba(255, 233, 213, 0.71) 0%, #FFFFFF 100%);
			border-radius: .16rem .16rem 0px 0px;
			display: flex;
			justify-content: space-between;
			padding: .2rem;
			box-sizing: border-box;

			.gold-recommend-icon-4 {
				width: 2.08rem;
				// margin-top: .1rem;
				height: .3rem;
			}

			.gold-recommend-icon-5 {
				width: 1.78rem;
				// margin-top: .1rem;
				height: .3rem;
			}

			div {
				height: .7rem;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: .28rem;
				color: #666666;
				text-align: left;
				font-style: normal;
			}
		}
		.banner2 {
			width: 95%;
			display: flex;
			justify-content: space-between;
			margin: 0 auto;
			margin-top: .2rem;

			.private_item {
				width: 30% !important;

				// height: 0.8rem;
				img {
					display: block;
					width: 100%;
					height: 2rem;
					margin: 0 auto;
					border-radius: .1rem;
					margin-bottom: .2rem;
				}
			}

			div {
				width: 100%;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: .24rem;
				color: #333333;
				line-height: .34rem;
				text-align: center;
				font-style: normal;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

		}
	}


}
</style>